<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
       <btns v-model="ipt" @handlerclick="handler">
       <template v-slot>
        <h2>未完成</h2>
        <div v-for="item in unfinishlist">
            <input type="checkbox" @click.prevent="handlerCheck(item)">
            {{item.name}}
            {{item.contents}}
            <button @click="del(item)">删除</button>
        </div>
        <h2>已完成</h2>
        <div v-for="item in finishlist">
            <input type="checkbox" checked @click.prevent="handlerCheck(item)">
            {{item.name}}
            {{item.contents}}
            <button @click="del(item)">删除</button>
        </template>
    </btns>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        // let bus = new Vue()
        let btns = {
            props:['value'],
            template: `
                        <div>
                            <textarea name="" id="" cols="30" rows="10" :value="value"
                         @keyup.enter="$emit('handlerclick',$event.target.value)"></textarea>
                            <slot></slot>
                        </div>
                     `,
                     


        }
        let vm = new Vue({
            el: "#app",
            components:{
                btns
            },
            data: {
                ipt: "",
                list: [{
                        id: 0,
                        name: "",
                        contents: '吃饭',
                        isChecked: false
                    },

                    {
                        id: 1,
                        name: "",
                        contents: '睡觉',
                        isChecked: true
                    },
                    
                ],

            },
            methods: {
                handler(ipt) {
                    this.ipt = ipt
                    this.list.push({
                        id: this.list.length,
                        contents: this.ipt,
                        isChecked: false
                    })
                    this.ipt = ""
                },
                handlerCheck(item) {
                    this.list[item.id].isChecked = !item.isChecked
                },
                del(item) {
                    this.list.splice(item.id, 1);
                    this.list.forEach((ele, index) => {
                        ele.id = index;
                    })
                }

            },

            computed: {
                unfinishlist() {
                    return this.list.filter(ele => ele.isChecked === false)
                },
                finishlist() {
                    return this.list.filter(ele => ele.isChecked === true)
                }
            }
        })
    </script>
</body>

</html>